<template>
    <div>
        <Card>
            <!-- search start -->
            <div class="search_div">
                <div class="add">
                    <Button v-if="role < 3 " size="default" icon="md-add" type="primary" @click="addQuestion">新增题目</Button>
                </div>

                <Form :model="search" class="search_box" inline label-position="right">
                    <FormItem label="题目名称：">
                        <Input v-model="search.question"></Input>
                    </FormItem>

                    <FormItem>
                        <Button icon="md-search" type="primary" @click="searchList">搜索</Button>
                    </FormItem>
                </Form>

            </div> <!-- end search -->

            <Table ref="table" :loading="loading" stripe :columns="columns1" :data="data1"></Table>
            <Page :total="total" :current="search.page" show-sizer show-total :page-size="search.rows" @on-page-size-change="getListByPageSize" @on-change="getListByPageNum"> </Page>
        </Card>

        <!-- modalAdd start -->
        <Modal v-model="modal" :title=" this.formItem.ctid ? '修改题目':'新增题目'" :mask-closable="false" @on-cancel="close">
            <Form :label-width="140" :model="formItem">
                <FormItem label="题目：">
                    <Input v-model="formItem.question" style="width:15vw"></Input>
                </FormItem>

                <FormItem label="选项A：">
                    <Input v-model="formItem.option.A" style="width:15vw"></Input>
                </FormItem>

                <FormItem label="选项B：">
                    <Input v-model="formItem.option.B" style="width:15vw"></Input>
                </FormItem>

                <FormItem label="选项C：">
                    <Input v-model="formItem.option.C" style="width:15vw"></Input>
                </FormItem>

                <FormItem label="选项D：">
                    <Input v-model="formItem.option.D" style="width:15vw"></Input>
                </FormItem>

                <FormItem label="选项E：">
                    <Input v-model="formItem.option.E" style="width:15vw"></Input>
                </FormItem>
                <!-- 
                <FormItem label="材料：">
                    <Input type="textarea" v-model="formItem.cailiao" style="width:15vw"></Input>
                </FormItem> -->
                <FormItem label="答案：">
                    <Input v-model="formItem.answer" style="width:15vw"></Input>
                </FormItem>
            </Form>

            <footer class="modalFooter" slot="footer">
                <Button type="default" @click="close">取消</Button>
                <Button type="primary" @click="save">保存</Button>
            </footer>
        </Modal>
    </div>
</template>

<script>
    import {
        mapGetters
    } from 'vuex'
    import axios from '@/libs/api.request'
    export default {
        name: 'question-detail',
        data() {
            return {
                loading: false,

                modal: false,

                // 题库id
                ctid: '',

                // 搜索对象
                search: {
                    question: '',
                    page: 1,
                    rows: 10
                },

                // 新增/修改对象
                formItem: {
                    question: '',
                    option: {
                        A: '',
                        B: '',
                        C: '',
                        D: '',
                        E: ''
                    },
                    answer: '',
                    cailiao: ''
                },

                // 数据总条数
                total: 0,

                columns1: [{
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '题目名称',
                        align: 'left',
                        key: 'question'
                    },
                    {
                        title: '正确答案',
                        align: 'center',
                        key: 'answer'
                    },
                    // {
                    //     title: '材料',
                    //     align: 'left',
                    //     key: 'cailiao'
                    // },
                    {
                        title: '操作',
                        width: 240,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'default',
                                        icon: 'md-brush',
                                        disabled: this.role > 2
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            if (this.role > 2) {
                                                return false
                                            }
                                            this.formItem = {
                                                ctid: params.row.id,
                                                question: params.row.question,
                                                option: params.row.option,
                                                answer: params.row.answer,
                                                cailiao: params.row.cailiao
                                            }
                                            this.modal = true
                                        }
                                    }
                                }, '编辑'),

                            ])
                        }
                    }

                ],
                data1: []
            }
        },
        methods: {
            ...mapGetters(['getRole']),

            // 获取题库列表
            getQuestionDetail() {
                this.loading = true
                let {
                    ...data
                } = this.search
                data.ckid = this.ckid
                axios.ajax_post('admin-class_ti-ajax_get_ct', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.data1 = res.data.data.list
                        this.total = res.data.data.total_num

                        if (this.data1.length < 1 && this.total > 0) {
                            this.search.page = Math.ceil(this.total / this.search.rows)
                            this.getQuestionDetail()
                        }
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            // 搜索
            searchList() {
                this.search.page = 1
                this.search.rows = 10
                this.getQuestionDetail()
            },

            // 新增题目
            addQuestion() {
                this.formItem = {
                    question: '',
                    option: {
                        A: '',
                        B: '',
                        C: '',
                        D: '',
                        E: ''
                    },
                    answer: '',
                    cailiao: ''
                }
                this.modal = true
            },

            // 保存
            save() {
                let data = this.formItem
                data.ckid = this.ckid
                let url = 'admin-class_ti-ajax_add_ct'

                for (const key in data.option) {
                    if (data.option[key].trim().length === 0) {
                        delete data.option[key]
                    }
                }

                if (data.ctid) {
                    url = 'admin-class_ti-ajax_save_ct'
                }

                axios.ajax_post(url, data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.modal = false
                        this.getQuestionDetail()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            close() {
                this.modal = false
            },

            getListByPageSize(rows) {
                this.search.rows = rows
                this.getQuestionDetail()
            },

            getListByPageNum(page) {
                this.search.page = page
                this.getQuestionDetail()
            },
        },
        computed: {
            role() {
                return this.getRole()
            }
        },
        created() {
            this.ckid = this.$route.params.id
            this.getQuestionDetail()
        },
        activated() {
            if (this.ckid != this.$route.params.id) {
                this.ckid = this.$route.params.id
                // this.search.question = ''
                this.getQuestionDetail()
            }
        }
    }
</script>

<style lang='less' scoped>
    .search_div {
        .search_box {
            width: auto
        }
    }

    .add {
        margin-right: 20px;
    }

    .importExcel {
        position: relative;
        display: inline-block;

        .imBtn {
            position: absolute;
            left: 0;
            opacity: 0;
            width: 100px;
            height: 32px;
            z-index: 999;
        }
    }
</style>